import React from 'react';
import {
    View,
    Text,
    FlatList,
    TouchableOpacity,
    Dimensions,
    Image,
} from 'react-native';
import styles from './styles';
import NavigationBar from '../../common/NavigationBar';
import {BASE_URL} from '../../common/BASE_URL';
import HttpUtils from '../../expand/dao/HttpUtils';
import {Constant, StylesConstant} from '../../common/Constant';
import StorageUtil from '../../utils/StorageUtil';
import NavigationUtil from '../../navigators/NavigationUtil';
import Utils from '../../utils/Utils';
import GlobalStyles from '../../common/styles/GlobalStyles';
import {Tabs} from '@ant-design/react-native';
import ToastUtil from '../../utils/ToastUtil';
import CaseItem from './components/CaseItem';

let current = 1;
let total = 0;
const size = 10;
export default class ApproveList extends React.Component {
    constructor(props) {
        super(props);
        // 获取参数
        let tabIndex = 0;
        this.state = {
            tabIndex: tabIndex,
            isLoading: true, // list加载状态
            hideLoadingMore: false,
            caseList: [{id:1},{id:2}],
            dataList2: [],
            query: {
                // current: 1, // 当前页数
                // size: 10, // 每页大小
                queryStr: '', // 模糊查询
            },
        };
    }

    componentDidMount() {
        this.loadData();
    }

    loadData() {
        const {tabIndex} = this.state;
        this.setState({
            isLoading: false,
            hideLoadingMore: true,
            caseList: [{id:1},{id:2}],
        })
    }
    // 初始化数据
    async initDriverList() {
        const code = await StorageUtil.get(Constant.companyCode);
        if (code) {
            this.setState({
                isLoading: true,
            });
            HttpUtils.request({
                // url: URL,
                type: 'post',
                data: {companyCode: code, type: this.state.type},
            })
                .then((result) => {
                    const data = result.data;
                    this.setState({
                        caseList: data,
                        isLoading: false,
                    });
                })
                .catch((_) => {
                    this.setState({
                        isLoading: false,
                    });
                });
        }
    }

    render() {
        const {navigation} = this.props;
        const {tabIndex} = this.state;
        return (
            <View style={GlobalStyles.pageContainer}>
                {/* 自定义顶部导航条 */}
                <NavigationBar navigation={navigation} headerBackTitle={'已办清单'} />
                <View style={{flex: 1}}>
                    <Tabs
                        style={[styles.container, GlobalStyles.bgGrey]}
                        initialPage={tabIndex}
                        tabBarTextStyle={GlobalStyles.tabsTextStyle}
                        tabBarUnderlineStyle={GlobalStyles.tabsLineStyle}
                        tabBarActiveTextColor={GlobalStyles.tabBarActiveTextColor}
                        tabBarInactiveTextColor={GlobalStyles.tabBarInactiveTextColor}
                        onChange={(tab, index) => this.handleTabChange(tab, index)}
                        tabs={[
                            {title: '待办'},
                            {title: '已办'},
                        ]}>
                        <View tabLabel="待办">{this._renderCaseList()}</View>
                        <View tabLabel="已办">{this._renderCaseList()}</View>
                    </Tabs>
                </View>
            </View>
        );
    }

    _renderCaseList(){
        const {caseList, isLoading} = this.state;
        return (
            <FlatList
                style={styles.list}
                data={caseList}
                keyExtractor={(item, index) => `case_${index}`}
                renderItem={(data) => this._renderCaseItem(data)}
                refreshControl={Utils.renderRefreshControl('加载中', isLoading, () => {
                    this.loadData();
                })}
                ListFooterComponent={() => this.genIndicator()}
                onEndReached={() => {
                    setTimeout(() => {
                        if (this.canLoadMore) {
                            this.loadData(true);
                            this.canLoadMore = false;
                        }
                    }, 100);
                }}
                onEndReachedThreshold={0.5}
                onMomentumScrollBegin={() => {
                    this.canLoadMore = true;
                }}
            />
        );
    }

    handleTabChange(obj, index) {
        if (this.state.index !== index) {
            this.state.tabIndex = index;
            this.loadData();
        }
    }
    _renderCaseItem(data){
        const {item} = data;
        return (
            <CaseItem
                item={item}
                handleCallback={() => {
                    // NavigationUtil.goPage('StaffCrewDetail', {
                    //     unitId: item.id,
                    // });
                }}
            />
        );
    }

    genIndicator() {
        const {hideLoadingMore} = this.state;
        return hideLoadingMore
            ? Utils.renderNoDataBottom()
            : Utils.renderLoadingMore();
    }

    getListBottom(isLoading, data) {
        return !isLoading && data && data.length === 0
            ? Utils.renderNoDataBottom()
            : null;
    }

}
